import router from '@/router'
import store from '@/store' // store====this.$store
// 前置守卫  beforeEach:所有的路由跳转都会经过它
const whitePage = ['/login', '/404']
router.beforeEach(async(to, from, next) => {
  // 1：如果登陆了就不能回登陆页    2：如果没有登陆就不能去首页
  /*
    是否有token
        有token
            判断要去的页面是否是登陆页
                如果是
                    跳转到首页
                如果不是
                    验证token获取用户信息
                    正常进入
        没有
           要去的页面是否需要登陆（提前定义一个白名单（404,login））
           如果进入的页面是白名单页面
               放行（正常进入）
            并不是白名单页面
                跳转到登陆页

    */
  // 2:正常
  // 3：重定向   301:永久重定向   304：协商缓存
  // 4：客户端问题   400：参数错误   401：代表无权限 403：没有访问权限

  //   console.log('to', to)
  if (store.state.user.token) {
    if (to.path.toLowerCase() === '/login') {
      next('/')
    } else {
      // 获取用户信息：需要在这里调用接口获取用户信息判断token是否非法
      /*
      获取用户信息
      1：定义api
      2:vuex:定义state,mutations,actions
      3:在导航守卫中调用并存储用户信息

      问题：
      1：每次切换页面都调用接口获取用户信息
          解决方案：没有用户信息才调用
      2：token验证失败时没处理
         token失效需要做什么？
            1：清除token
            2:用户信息也要清空
            3：跳转到登陆页
      */

      // console.log(1)
      if (!store.state.user.userInfo.userId) {
        await store.dispatch('user/getUserInfo')
        // console.log('导航守卫')
        // 因为addRoutes添加的路由不能立马使用需要再经过一次导航守卫
        // next()   next(其它path)
        next(to.fullPath)
      } else {
        next()
      }
      // console.log(2)
    }
  } else {
    if (whitePage.includes(to.path.toLowerCase())) {
      next()
    } else {
      next('/login?redirect=' + to.fullPath)
    }
  }

  //   next()
})

// 后置守卫
router.afterEach((to, from) => {
  // 已处于to的路由了
  window.scrollTo(0, 0)
})
